<template>
  <!-- 活动样式 -->
  <li :class="{ completed: item.isDone, editing: editId === item.id }">
    <div class="view">
      <!-- 动态去控制checked属性 -->
      <input
        class="toggle"
        type="checkbox"
        :checked="item.isDone"
        @change="changeTask(item.id)"
      />
      <label @dblclick="updateEdit(item)">{{ item.todoName }}</label>
      <button class="destroy" @click="delItem(item.id)"></button>
    </div>
    <input
      class="edit"
      v-focus
      v-model="todoName"
      @keyup.enter="updateItem(item.id)"
       @blur="updateItem(item.id)"
         @keyup.esc="escEdit"
    />
  </li>
</template>

<script>
//vuex提供的简写方法，传递数据等
import { mapMutations, mapActions } from 'vuex';
export default {
  name: 'item',
  props: ['item'],
  data() {
    return {
      editId: '',
      todoName: '',
    };
  },
  methods: {
    ...mapMutations(['CHANGE_TASK', 'UPDATE_EDIT']),
    ...mapActions(['deleteTask']),

    changeTask(id) {
      this.CHANGE_TASK(id);
    },
    //过一分钟删除数据，异步操作
    delItem(id) {
      this.deleteTask(id);
    },
    //编辑
    updateEdit(item) {
      //文本框显示
      this.editId = item.id;
      this.todoName = item.todoName;
    },
    updateItem(id) {
      const { todoName } = this;
      this.UPDATE_EDIT({ id, todoName });
      //修改内容，文本框隐藏
      this.editId = '';
    },
    escEdit(){
      this.editId =''
    }
  },
  //局部获取焦点
  directives: {
    focus(el) {
      el.focus();
    },
  },
};
</script>

<style></style>
